<template>
  <!-- 流程图  当员工时候不显示，审核人是老板时候显示-->
  <view class="auditProcess">
    <view class="title">审阅状态</view>
    <u-steps dot direction="column" :current="dates" class="stepbox" activeColor="#0038F7" inactiveColor="#EFEFEF">
      <u-steps-item v-for="(item, index) in  stepList " :key="index">
        <template #desc>
          <view class="status_wrap">
            <view class="status">
            <up-avatar v-if="status !== 2" :src="`${baseUrl}` + item.avatar" shape="circle" size="40"></up-avatar>
            <view class="status_left">
              <view class="name">{{ item.nickname }}
                <text class="position">{{ item.title }}</text>
              </view>
              <view class="date">{{ item.datetime }}</view>
            </view>
            <view class="status_right">
              <button class="taster "
                :class="item.state == 0 ? 'yellow' : item.state == 1 ? 'green' : item.state == 2 ? 'red' : 'yellow'">
                {{ item.state_text }}
              </button>

            </view>
           
          </view>
          <view class="status_cont" v-if="item.state == 2">
              <view class="texts">{{ item.remark }}</view>
            </view>
          </view>
          
        </template>
      </u-steps-item>
    </u-steps>


  </view>
</template>

<script setup>
import { baseUrl } from "@/sheep/config";
const props = defineProps({
  stepList: {
    type: Array,
    default:()=> []
  },
  dates: {
    type: Number,
    default: 0
  },

})

</script>

<style scoped lang="scss">
.auditProcess {
  border-top: 1rpx solid #EFEFEF;

  .title {
    height: 90rpx;
    line-height: 90rpx;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    position: relative;
    margin-bottom: 20rpx;

    &::after {
      width: 92rpx;
      height: 14rpx;
      content: '';
      position: absolute;
      bottom: 23%;
      z-index: 9;
      left: 3%;
      border-radius: 10rpx;
      background-color: rgba(0, 56, 247, 0.5);
    }
  }

  .day_date {
    color: $uni-text-color;
    font-weight: 500;
    font-size: 22rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
  }
.status_wrap{
  min-height: 140rpx;
  padding-left: 20rpx;
}
  .status {
    display: flex;
    justify-content: space-between;
    .status_left {
      width: 70%;
      margin-left: 20rpx;

      .names {}

      .name {
        color: $uni-text-color;
        font-weight: 500;
       font-size:$uni-font-size-26;

        .position {
          color: #999999;
          font-weight: 500;
          font-size: 22rpx;
          margin-left: 10rpx;
        }

        .gray {
          color: #999999;
          font-weight: 500;
          font-size: 22rpx;
          margin-left: 10rpx;
        }
      }

      .date {
        font-family: PingFangSC;
        color: #999999;
        font-weight: 500;
        font-size: $uni-font-size-sm;
        margin-top: 10rpx;
      }
    }

    .status_right {
      .taster {
        border: none;
        width: 104rpx;
        height: 40rpx;
        font-family: PingFangSC;
        font-weight: 500;
        font-size: 22rpx;
        border-radius: 18rpx;
        line-height: 40rpx;
        padding: 0;

        &::after {
          border: none;
        }
      }

      .yellow {
        color: #F77704;
        background: #FEF3E6;
      }

      .green {
        color: #17A500;
        background: #EAFEE6;
      }

      .red {
        color: #FF0000;
        background: #FEE6E6;
      }
    }
  }
  .status_cont{
      width: 100%;
      margin: 10rpx 0 10rpx 0;
      .texts{
        padding: 20rpx;
        line-height: 1.2;
        color: #666666;
        font-weight: 400;
       font-size:$uni-font-size-26;
      }
      border-radius: 16rpx;
    background-color: #F9FAFF;
    }
}
</style>